import React from 'react'
import { routerRedux } from 'dva/router';
import { Button, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import BusinessTypeReserveService from '../../services/businessTypeReserveService'
class BusinessTypeReserve extends React.Component {
  state = {
    count: 0,
    list: ['a', 'd', 'g'],

    records: []
  }

  countChnage() {
    this.setState({
      count: this.state.count + 1
    })
  }

  backHome() {
    this.props.history.push({ pathname: '/home', })
  }

  routerTest() {
    const { dispatch } = this.props
    dispatch(routerRedux.push('/home?id=2'))
  }

  //提交
  async getAutofocus() {
    const { autofocus } = this.props.form.getFieldsValue()
    const { code, data, msg } = await BusinessTypeReserveService.add({
      sys_type: 3,
      sys_value: 9,
      note: 'note'
    })
    this.setState({
      list: data
    })
    if (code === '0000') {
      console.log(data)
    } else {
      Toast.fail(msg, 1)
    }
  }

  // 添加一行
  addItem() {
    let records = this.state.records
    records.push({
      startDate: '',
      endDate: ''
    })
    this.setState({
      records: records
    })
  }
  //删除一行
  removeItem(index,e) {
    let records = this.state.records

    this.setState({
      records: this.state.records.filter((elem, i) => index !== i)
    })
  }
  getReacords() {
    const fields = this.props.form.getFieldsValue()
    let records = new Set()
    Object.keys(fields).forEach((key, index) => {
      if (key.indexOf("autofocus" != -1)) {
        records.add(fields[key])
      }
    })

    console.log('records:', records)
  }
  render() {
    const { records } = this.state
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <h2> {this.state.count} </h2>
        <button onClick={this.countChnage.bind(this)} > count++ </button>
        <button onClick={this.backHome.bind(this)}>回到首页</button>
        <button onClick={this.routerTest.bind(this)}>跳转，带参数</button>
        {
          this.state.list.map((item, index) => <div key={index}>{item}</div>)
        }
        <InputItem
          {...getFieldProps('autofocus')}
          clear
          placeholder="auto focus"
          ref={el => this.autoFocusInst = el}
        >标题</InputItem>
        <Button type="primary" onClick={this.getAutofocus.bind(this)}>点击获取标题内容</Button>


        {
          records.map((item, index) => {
            return <div key={index}>
              <InputItem
                {...getFieldProps('autofocus' + index)}
                clear
                placeholder="auto focus"
                ref={el => this.autoFocusInst = el}
              >标题</InputItem>
              <div onClick={this.removeItem.bind(this,index)}>删除</div>
            </div>
          })
        }
        <Button type="primary" onClick={this.addItem.bind(this)}>新增时段</Button>
        <Button type="primary" onClick={this.getReacords.bind(this)}>获取list值</Button>
      </div>
    )
  }
}

export default createForm()(BusinessTypeReserve);
